@import './pgsql_common.scss';

.card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #ffffff;
  border-radius: 16px;
}

.copyBtn {
  @include iconBox(32px, rgba(35, 168, 242, 0.15), 12px, 8px);
}

.pgsqlFrontPage {
  background-image: url('/images/pgsql/pgsql_bg.png');
  background-size: cover;
}

.title {
  font-weight: 600;
  font-size: 16px;
  color: #273b58;
}

.yaml {
  margin: 18px 0 20px 16px;
  min-width: 260px;
  display: flex;
  flex-grow: 1;
  background: rgba(255, 255, 255) !important;
  opacity: 0.8;
}

.minYaml {
  height: calc(100% - 260px);
}

.cardName {
  @extend .card;
}

.cardVolume {
  @extend .card;
  margin-top: 12px;
}

.cardIops {
  background: rgba(255, 255, 255);
  height: 118px;
  border-radius: 12px;
  display: flex;
  margin: 16px;
  padding: 10px 16px;
}

.cardUsers {
  @extend .card;
  padding: 16px;
}

.cardCpu {
  @extend .card;
  padding: 16px;
}

.pgsqlFormScroll {
  display: flex;
  flex: 1 1 540px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
}

.yamlTemplate div pre div {
  background: rgba(255, 255, 255) !important;
}

.yamlTemplate > * pre {
  padding: 0;
}

.customInput {
  flex: 1 1 240px;
  height: 42px;
  background: #e5ebf8;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid transparent;
  input {
    width: 100%;
    height: 100%;
    border-color: transparent;
    outline: transparent;
    background: #e5ebf8;
  }
  &:hover {
    border: 1px solid #7a9dea;
  }
}

.loading {
  width: 260px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
}

.valid {
  border: 1px solid rgba(238, 65, 97, 1) !important;
  div span:hover {
    border: 1px solid transparent !important;
  }
  div span::after {
    border-color: transparent !important;
  }
}

.inputName {
  width: 100%;
  border-radius: 12px;
  border: 1px solid transparent;
}
